<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>  
 <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="<%=basePath%>page/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=basePath%>page/css/laypage.css">

<script src="<%=basePath%>page/js/vue/vue.min.js"></script>
<script src="<%=basePath%>page/js/jquery/jquery.min.js"></script>
<script src="<%=basePath%>page/js/laypage/laypage.js" charset="utf-8"></script>
<script src="<%=basePath%>page/js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
<jsp:include page="common.jsp"></jsp:include>
<section id="main-content">
		<section class="wrapper">
	<div id="app" class="container">
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr>
						<th>序号</th>
						<th>员工姓名</th>
						<th>员工手机号</th>
						<th>员工所述部门</th>
						<th>员工职位</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr class="active" v-for="(item,index) in result">
					<td>${index+1 }</td>
					<td>${item.ename }</td>
					<td>${item.ephone }</td>
					</tr>
				</tbody>
				<tr>
				<td colspan="3"><div id="pagenav"></div></td>
				</tr>
			</table>
		</div>
	</div>
	</section>
	</section>
	<script type="text/javascript">
		var app=new Vue({
			el:'#app',
			data:{
				result:[]
			}
		});
		
		//查询数据
		var getEmployeeList=function(curr){
			$.ajax({
				type:'GTT',
				dataType:"json",
				url:"/limit/getEmployeePage.do",
				data:{
					pageNum:curr||1,
					pageSize:5
				},
				success:function(msg){
					app.result=msg.page;
					laypage({
						cont:'pagenav',
						pages:msg.totalPage,
						first:'首页',
						last:'尾页',
						curr:curr||1,//当前页
						jump:function(obj,first){//触发分页后的回调
							if(!first){//点击跳页触发函数自身,并传递当前页:obj.curr
								getEmployeeList(obj.curr);
								
							}
							
						}
					});
				}
			});
		}
		getEmployeeList();
	</script>
</body>
</html>